<template>
  <div>
    <div class="list">
      <tr class="head">
        <div class="index yahei"></div>
        <div class="collection yahei">操作</div>
        <div class="title yahei">音乐标题</div>
        <div class="singer yahei">歌手</div>
        <div class="album yahei">专辑</div>
        <div class="time yahei">时长</div>
      </tr>

      <tr
        class="item"
        v-for="(item, ind) in playingSongsList"
        :key="item.id"
        @dblclick="playMusic(ind, item.id)"
      >
        <div class="index yahei" v-show="playingId != ind">{{ ind + 1 }}</div>
        <div class="index playing yahei iconfont" v-show="playingId === ind">
          &#xe7a5;
        </div>
        <div class="collection yahei">
          <i class="iconfont">&#xe602;</i>
        </div>
        <div class="title yahei">{{ item.name }}</div>
        <div class="singer yahei">{{ handleAuthor(item.ar) }}</div>
        <div class="album yahei">{{ item.al.name }}</div>
        <div class="time yahei">{{ totalTime(item.dt) }}</div>
      </tr>

      <div class="text"></div>
    </div>
  </div>
</template>

<script>
import bus from "utils/bus.js";
import { handleAuthor } from "utils/author.js";
import dayjs from "dayjs";
export default {
  name: "playMusicList",
  data() {
    return {
      playingSongsList: [],
      playingId: -1,
    };
  },
  methods: {
    handleAuthor,
    totalTime(T) {
      return dayjs(T).format("mm:ss");
    },
    playMusic(ind) {
      this.playingId = ind;
      bus.$emit("pMusicListplay", ind);
      bus.$emit("ended", ind);
    },
  },
  created() {
    bus.$on("musicPlaying", (playingId) => {
      this.playingId = playingId;
    });
    bus.$on("ended", (ind) => {
      this.playingId = ind;
    });
    bus.$on("playListUpdate", (list) => {
      this.playingSongsList = list;
    });
  },
};
</script>

<style scoped lang="less">
.list {
  // position: relative;
  // z-index: 19999;
  > :nth-child(odd) {
    background: #f9f9f9;
  }
  > :nth-child(2) {
    padding-top: 0.25rem;
  }
  tr {
    padding: 0 5px;
    display: flex;
    div {
      padding: 5px;
    }
    .index {
      width: 50px;
      border: none !important;
    }
    .collection {
      width: 60px;
    }
    .title {
      flex: 1 1 0%;
    }
    .singer {
      flex: 1 1 0%;
    }
    .album {
      flex: 1 1 0%;
    }
    .time {
      flex: 0.4;
    }
  }
  .head {
    position: absolute;
    width: 3.95rem;
    border-bottom: 1px solid #dde0e7;
    div {
      border-left: 1px solid #dde0e7;
    }
  }
}

.playing {
  color: lightseagreen;
}

.list {
  height: 4.166667rem;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
